/*
 * @Author: SongXiao
 * @Date: 2023-02-27 15:39:51
 * @LastEditors: SongXiao
 * @LastEditTime: 2023-03-22 11:43:33
 * @Description: file content
 */
import React, { useEffect } from 'react';
import  * as d3 from 'd3';

const WeatherChart = function(){

    useEffect(() => {
        var width = 300;  //画布的宽度
        var height = 300;   //画布的高度

        var svg = d3.select("body")   //选择文档中的body元素
        .select("svg")      //添加一个svg元素
        .attr("width", width)       //设定宽度
        .attr("height", height);    //设定高度

        var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
        var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x",10)
            .attr("y",function(d,i){
                return i * rectHeight;
            })
            .attr("width",function(d){
                return d;
            })
            .attr("height",rectHeight-3)
            .attr("fill","steelblue");
    },[])

    return(
        <div className="weather-chart">
            <svg className="chart-show"></svg>
        </div>
    )
}

export default WeatherChart